<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ $route.query.type == "add" ? '新建评价问卷' : "编辑评价问卷" }}</span>
      </div>
    </template>

    <div class="add-form" v-loading="loading">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="提醒类别" prop="evaluateType">
          <el-select v-model="ruleForm.evaluateType" placeholder="请选择提醒类别">
            <el-option label="学习提醒" value="1" />
            <el-option label="上报提醒" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="通知日期" prop="evaluateTime">
          <el-date-picker
            v-model="ruleForm.evaluateTime"
            type="dates"
            placeholder="请选择通知日期，可多选"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="通知单位" prop="evaluateDepart">
          <el-select v-model="ruleForm.evaluateDepart" placeholder="请选择要通知的单位">
            <el-option label="学习提醒" value="1" />
            <el-option label="上报提醒" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="学习主题" prop="evaluateTheme">
          <el-input v-model="ruleForm.evaluateTheme" placeholder="请输入学习主题"></el-input>
        </el-form-item>

        <el-form-item label="学习内容" prop="evaluateContent">
          <t-editor v-model="ruleForm.evaluateContent" @input="inputContent" style="width: 100%;"/>
        </el-form-item>

        <el-form-item label="学习形式" prop="evaluateRetype">
          <el-select v-model="ruleForm.evaluateRetype" placeholder="请选择学习形式">
            <el-option label="集体学习讨论" value="1" />
            <el-option label="专题辅导报告" value="2" />
            <el-option label="现场调研" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="学习范围" prop="evaluateArea">
          <el-input v-model="ruleForm.evaluateArea" autosize type="textarea" placeholder="请输入学习范围"></el-input>
        </el-form-item>

        <el-form-item label="附件" prop="evaluateFile">
          <el-upload
            v-model:file-list="ruleForm.evaluateFile"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">
              <el-icon>
                <UploadFilled />
              </el-icon>
              上传附件
            </el-button>
            <template #tip>
              <div class="el-upload__tip">
                请上传2M以下的文件
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注" prop="evaluateRemark">
          <el-input v-model="ruleForm.evaluateRemark" autosize type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
        
        <el-form-item class="add-button">
          <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="buttonLoading">
            {{ $route.query.type == "add" ? '新增' : "编辑" }}
          </el-button>
          <el-button @click="resetForm(ruleFormRef)" :loading="buttonLoading">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default { name: "backendPublicizeEvaluateAdd" }
</script>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router'
import { UploadFilled } from '@element-plus/icons-vue'
import tEditor from "@/components/tinymceEditor/tEditor.vue"
import { ElMessage } from 'element-plus'
import { http } from '@/utils/http/index';

/* 路由 */
const route = useRouter()

onMounted(() => {
  if(route.currentRoute.value.query.id){
    getEvaluateDetail()
  }
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 查询详情 */
const getEvaluateDetail = () => {
  /* loading.value = true
  http.$GET("/TheoryStudyM/GetTheoryStudyNewsDetailById", { Id: route.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    ruleForm.value = res.result
  }) */
}

/* 表单 */
const ruleFormRef = ref(null)

/* 表单数据 */
const ruleForm = ref({
  evaluateFile: [],
  evaluateContent: ""
})

/* 上传文件校验 */
const checkFile = (rule, value, callback) => {
  if (ruleForm.evaluateFile.length == 0) {
    callback(new Error('请上传附件'))
  } else {
    callback()
  }
}

/* 表单校验规则 */
const rules = reactive({
  evaluateType: [
    { required: true, message: '请选择提醒类别', trigger: 'change' }
  ],
  evaluateTime: [
    { required: true, message: '请选择通知日期', trigger: 'change' }
  ],
  evaluateDepart: [
    { required: true, message: '请选择通知的单位', trigger: 'change' }
  ],
  evaluateTheme: [
    { required: true, message: '请选择学习主题', trigger: 'change' }
  ],
  evaluateContent: [
    { required: true, message: '请填写学习内容', trigger: 'blur' }
  ],
  evaluateRetype: [
    { required: true, message: '请选择学习形式', trigger: 'change' }
  ],
  evaluateArea: [
    { required: true, message: '请选择学习范围', trigger: 'change' }
  ],
  evaluateFile: [
    { required: true, validator: checkFile, message: '请上传附件', trigger: 'change' }
  ],
})

/* 上传文件列表变化 */
watch(
  ruleForm.value.evaluateFile,
  (newVal) => {
    if(newVal.length){
      ruleFormRef.value.clearValidate('evaluateFile')
    }
  }
)

/* 富文本内容变化 */
const inputContent = (newVal) => {
  console.log(newVal)
  if(newVal){
    ruleFormRef.value.clearValidate('evaluateContent')
  }
  ruleForm.value.evaluateContent = newVal
}

const handlePreview = () => {

}

const handleRemove = () => {
  
}

const beforeRemove = () => {
  
}

const handleExceed = () => {
  
}

/* 提交新增或编辑时，按钮禁用 */
const buttonLoading = ref(false)

/* 提交 */
const submitForm = (formName) => {
  ruleFormRef.value.validate((valid, fields) => {
    if(valid) {
      console.log(JSON.parse(JSON.stringify(ruleForm.value)))
      /* buttonLoading.value = true
      http.$POST("/TheoryStudyM/AddOrUpdateTheoryStudyNews", ruleForm.value).then(res => {
        buttonLoading.value = false
        if (res.isError) {
          ElMessage({
            type: 'warning',
            message: res.message,
          })
        }else{
          ElMessage({
            type: 'success',
            message: '操作成功',
          })
          route.push({
            path: "/backend/publicize-evaluate"
          })
        }
      }).catch(err => {
        buttonLoading.value = false
        ElMessage({
          type: 'warning',
          message: '操作失败',
        })
      }) */
    }else{
      ElMessage({
        type: 'warning',
        message: '请先完成必填项',
      })
    }
  })
}

/* 重置 */
const resetForm = (formName) => {
  ruleFormRef.value.resetFields()
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>